<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 22:47:46
 * @LastEditTime: 2024-05-05 17:43:54
 * @FilePath: \env-manager-pc\src\views\statistics\no_document\index.vue
-->
<script setup lang="ts">
import dayjs from 'dayjs'
import statisticsApi from '@/api/modules/statistics'
import { usePage } from '@/utils/commonHook'

const { page, pageNumChange, pageSizeChange } = usePage(getTableData)
const tableData = ref<any>([])
const loading = ref(false)
const searchData = reactive({
  address: '',
  isOnline: null,
  ips: '',
})

interface TimeRangeType {
  startTime: string | null
  endTime: string | null
}

const timeRange = reactive<TimeRangeType>({
  startTime: dayjs().subtract(1, 'day').format('YYYYMMDD'),
  endTime: dayjs().add(1, 'day').format('YYYYMMDD'),
})

const tiemValue = computed({
  set: (values) => {
    const realValues = values || []
    timeRange.startTime = realValues[0]
    timeRange.endTime = realValues[1]
  },
  get: () => {
    return [timeRange.startTime, timeRange.endTime]
  },
})

function getTableData() {
  loading.value = true
  statisticsApi.GetUnknownConnect({
    ...timeRange,
    address: [searchData.address],
    isOnline: searchData.isOnline,
    ips: [searchData.ips],
    pageNum: page.PageNum,
    pageSize: page.PageSize,
  }).then((res) => {
    const { Objs, RecordsetCount } = res as any
    tableData.value = Objs || []
    page.RecordsetCount = RecordsetCount
    loading.value = false
  }, () => {
    loading.value = false
  })
}

getTableData()

function search() {
  page.PageNum = 1
  getTableData()
}
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <ElForm label-width="100">
          <ElRow>
            <ElCol :span="6">
              <ElFormItem label="MN号">
                <ElInput v-model="searchData.address" clearable />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="ips">
                <ElInput v-model="searchData.ips" clearable />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="当前在线状态">
                <ElSelect v-model="searchData.isOnline" class="w-full" clearable>
                  <ElOption label="在线" :value="true" />
                  <ElOption label="不在线" :value="false" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="最后通信时间">
                <ElDatePicker v-model="tiemValue" type="daterange" value-format="YYYYMMDD" clearable />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6" :push="18" class="flex flex-justify-end">
              <ElButton type="primary" @click="search">
                查询
              </ElButton>
              <ElButton type="warning">
                导出
              </ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="85">
        <vxe-table
          height="100%" auto-resize
          border
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true }"
        >
          <VxeColumn title="序号" type="seq" width="80" />
          <!-- <VxeColumn field="OwnerOrgClassifyName" title="类型" min-width="100" /> -->
          <VxeColumn field="Address" title="MN号" min-width="220" />
          <VxeColumn field="StartTime" title="连接时间" min-width="220" />
          <VxeColumn field="EndTime" title="断开时间" min-width="220" />
          <VxeColumn field="IP" title="设备IP地址" min-width="160" show-overflow />
          <VxeColumn field="Port" title="设备端口" min-width="100" />
        </vxe-table>
      </div>
      <ElPagination
        class="mt-4"
        :page-size="page.PageSize"
        :total="page.RecordsetCount"
        :current-page="page.PageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        @current-change="pageNumChange"
        @size-change="pageSizeChange"
      />
    </PageMain>
  </div>
</template>
